<template>
  <view class="acme-app-bar" :style="{ backgroundColor, position: isFixed ? 'fixed': 'static' }">
    <view class="app-bar-view" :class="{'safe-area-top': isFixed}">
      <view class="left-wrap">
        <view class="back-btn" @click="back" v-if="isBack">
          <uni-icons class="icon" type="arrowleft" size="25"/>
        </view>
        <text class="left-text" v-if="leftText" @click="back">{{leftText}}</text>
      </view>
      
      <view class="title" :style="{ width: titleWidth }">{{ title }}</view>
      <slot name="center"></slot>
      
      <acme-search-bar 
        v-if="search" 
        v-model="keywords" 
        :height="60" :inputHeight="60" :radius="60" :focus="focus"
        :placeholder="placeholder"
        @input="handleInput"
      />
      
      <view class="right-wrap" @click="rightClick">
        <text class="right-text" v-if="rightText">{{rightText}}</text>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
  import AcmeSearchBar from '@/components/acme-design/search-bar/index.vue'
  export default {
    components: {
      AcmeSearchBar
    },
    name: "AppBar",
    props: {
      // 标题
      title: {
        type: String,
        default: ''
      },
      // 标题宽度
      titleWidth: {
        type: String,
        default: '280rpx'
      },
      // 是否显示返回按钮
      isBack: {
        type: Boolean,
        default: true
      },
      // 左侧文字
      leftText: {
        type: String,
        default: ''
      },
      // 右侧文字
      rightText: {
        type: String,
        default: ''
      },
      // 固定到顶部
      isFixed: {
        type: Boolean,
        default: true
      },
      // 背景颜色
      backgroundColor: {
        type: String,
        default: "#fff",
      },
      // 搜索模式
      search: {
        type: Boolean,
        default: false
      },
      value: {
        type: String,
        default: ''
      },
      // 输入框默认文字
      placeholder: {
        type: String,
        default: '请输入搜索关键字'
      },
      // 获得焦点
      focus: {
        type: Boolean,
        default: true
      },
    },
    watch: {
      value(e) {
        this.keywords = e
      }
    },
    data() {
      return {
        keywords: '',
        safeAreaTop: ''
      }
    },
    mounted() {
      this.getSystemInfo()
      this.initValue()
    },
    methods: {
      initValue() {
        this.keywords = this.value
      },
      back() {
        this.$emit('back')
        uni.navigateBack()
      },
      rightClick() {
        this.$emit('rightClick')
      },
      handleInput(e) {
        this.$emit('input', e)
      },
      getSystemInfo() {
        try {
          const res = uni.getSystemInfoSync()
          this.safeAreaTop = res.safeAreaInsets.bottom
        } catch (e) {}
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import  './index.scss';
</style>
